<template>
	<view class="mx-recom-card">
		<MxBlockTitle title="推荐卡项" @to="toAllCards" />
		<scroll-view class="card-list" scroll-x enable-flex>
			<MxRecomCardItem v-for="card in list" class="cmp-card-item" :key="card.nid" :info="card" />
		</scroll-view>
	</view>
</template>

<script>
	import MxBlockTitle from '@/components/index/MxBlockTitle.vue'
	import MxRecomCardItem from '@/components/index/MxRecomCardItem.vue'
	export default {
		components: {
			MxBlockTitle,
			MxRecomCardItem
		},
		props: {
			list: {
				type: Array
			}
		},
		methods: {
			toAllCards() {
				uni.navigateTo({
					url: '/pages/shop/shop'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/var.scss';
	.mx-recom-card {
		font-family: $font-family;
		box-sizing: border-box;
		padding: 44rpx 16rpx 32rpx;
		background-color: #fff;
		width: 100%;

		.card-list {
			margin-top: 16rpx;
			display: flex;
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.cmp-card-item {
				display: inline-flex;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}

		}
	}
</style>
